<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI问诊助手演示</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .transcript-entry {
            transition: background-color 0.3s;
        }
        .transcript-entry.doctor {
            border-left: 4px solid #3b82f6;
        }
        .transcript-entry.patient {
            border-left: 4px solid #10b981;
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .highlight {
            background-color: #fef3c7;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex flex-col">
        <!-- 头部 -->
        <header class="bg-white shadow-sm">
            <div class="container mx-auto px-4 py-4">
                <div class="flex justify-between items-center">
                    <h1 class="text-2xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-heartbeat text-blue-500 mr-3"></i>
                        AI问诊助手演示
                    </h1>
                    <div class="flex items-center space-x-4">
                        <button id="new-consultation" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-plus mr-2"></i>新建问诊
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧：语音输入和实时转录 -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold text-gray-800">实时语音转录</h2>
                        <div class="flex space-x-2">
                            <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center pulse">
                                <i class="fas fa-microphone mr-2"></i>开始录音
                            </button>
                            <button id="simulate-btn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
                                <i class="fas fa-play mr-2"></i>模拟对话
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-100 rounded-lg p-4 h-80 overflow-y-auto mb-4" id="transcript-container">
                        <div class="text-center text-gray-500 py-10">
                            <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                            <p>点击"开始录音"或"模拟对话"开始演示</p>
                        </div>
                    </div>

                    <div class="flex justify-between items-center">
                        <div class="text-sm text-gray-500">
                            <span>识别准确率: <span id="accuracy-rate">-</span></span>
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-600 hover:text-gray-800">
                                <i class="fas fa-pause"></i> 暂停
                            </button>
                            <button class="text-gray-600 hover:text-gray-800">
                                <i class="fas fa-redo"></i> 重新开始
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧：分析结果和诊断建议 -->
                <div class="space-y-6">
                    <!-- 关键信息提取 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">关键信息提取</h2>
                        <div id="key-info" class="space-y-3">
                            <div class="text-center text-gray-500 py-4">
                                <i class="fas fa-info-circle text-2xl mb-2"></i>
                                <p>等待对话分析结果</p>
                            </div>
                        </div>
                    </div>

                    <!-- 诊断建议 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">AI诊断建议</h2>
                        <div id="diagnosis-suggestions">
                            <div class="text-center text-gray-500 py-4">
                                <i class="fas fa-stethoscope text-2xl mb-2"></i>
                                <p>等待诊断建议生成</p>
                            </div>
                        </div>
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <button id="generate-record" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg disabled:opacity-50" disabled>
                                <i class="fas fa-file-medical mr-2"></i>生成问诊记录
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 问诊记录预览 -->
            <div id="record-section" class="mt-6 bg-white rounded-xl shadow-md p-6 hidden">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-gray-800">问诊记录</h2>
                    <div class="flex space-x-2">
                        <button class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-download mr-1"></i>导出PDF
                        </button>
                    </div>
                </div>
                <div id="record-content" class="border border-gray-200 rounded-lg p-4">
                    <!-- 记录内容将在这里生成 -->
                </div>
            </div>
        </main>

        <!-- 底部 -->
        <footer class="bg-white border-t py-4">
            <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
                <p>AI问诊助手演示版 - 模拟真实的医疗问诊辅助功能</p>
            </div>
        </footer>
    </div>

    <script>
        // 模拟对话数据
        const mockDialog = [
            { speaker: 'doctor', text: '您好，请问哪里不舒服？', time: '10:30:05' },
            { speaker: 'patient', text: '医生，我头痛三天了，越来越严重。', time: '10:30:12' },
            { speaker: 'doctor', text: '头痛是哪种性质的？是胀痛还是刺痛？', time: '10:30:20' },
            { speaker: 'patient', text: '主要是胀痛，感觉头要炸了一样。', time: '10:30:28' },
            { speaker: 'doctor', text: '有没有其他伴随症状？比如恶心、呕吐？', time: '10:30:35' },
            { speaker: 'patient', text: '有恶心，但没有呕吐。', time: '10:30:42' },
            { speaker: 'doctor', text: '这种情况持续多长时间了？', time: '10:30:50' },
            { speaker: 'patient', text: '大概三天了，每天都是这样。', time: '10:30:58' }
        ];

        // DOM元素
        const transcriptContainer = document.getElementById('transcript-container');
        const recordBtn = document.getElementById('record-btn');
        const simulateBtn = document.getElementById('simulate-btn');
        const accuracyRate = document.getElementById('accuracy-rate');
        const keyInfo = document.getElementById('key-info');
        const diagnosisSuggestions = document.getElementById('diagnosis-suggestions');
        const generateRecordBtn = document.getElementById('generate-record');
        const recordSection = document.getElementById('record-section');
        const recordContent = document.getElementById('record-content');
        const newConsultationBtn = document.getElementById('new-consultation');

        // 应用状态
        let isRecording = false;
        let dialogIndex = 0;
        let dialogTimer = null;

        // 录音按钮事件
        recordBtn.addEventListener('click', function() {
            if (isRecording) {
                stopRecording();
            } else {
                startRecording();
            }
        });

        // 模拟对话按钮事件
        simulateBtn.addEventListener('click', function() {
            if (isRecording) {
                stopRecording();
            }
            simulateDialog();
        });

        // 新建问诊按钮事件
        newConsultationBtn.addEventListener('click', function() {
            resetApp();
        });

        // 生成记录按钮事件
        generateRecordBtn.addEventListener('click', function() {
            generateMedicalRecord();
        });

        // 开始录音
        function startRecording() {
            isRecording = true;
            recordBtn.classList.remove('bg-red-500', 'hover:bg-red-600', 'pulse');
            recordBtn.classList.add('bg-gray-500', 'hover:bg-gray-600');
            recordBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i>停止录音';
            
            // 清空转录容器
            transcriptContainer.innerHTML = '';
            
            // 添加录音提示
            const recordingIndicator = document.createElement('div');
            recordingIndicator.className = 'text-center text-gray-500 py-10';
            recordingIndicator.innerHTML = `
                <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                <p>正在录音中...</p>
                <p class="text-sm mt-2">请开始说话</p>
            `;
            transcriptContainer.appendChild(recordingIndicator);
            
            // 模拟录音过程
            setTimeout(() => {
                addTranscriptEntry('doctor', '您好，请问哪里不舒服？', '10:30:05');
                setTimeout(() => {
                    addTranscriptEntry('patient', '医生，我头痛三天了，越来越严重。', '10:30:12');
                    // 模拟分析结果
                    setTimeout(showAnalysisResults, 1000);
                }, 2000);
            }, 1000);
        }

        // 停止录音
        function stopRecording() {
            isRecording = false;
            recordBtn.classList.remove('bg-gray-500', 'hover:bg-gray-600');
            recordBtn.classList.add('bg-red-500', 'hover:bg-red-600', 'pulse');
            recordBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i>开始录音';
        }

        // 模拟对话
        function simulateDialog() {
            // 重置状态
            dialogIndex = 0;
            transcriptContainer.innerHTML = '';
            
            // 开始模拟对话
            playNextDialog();
        }

        // 播放下一条对话
        function playNextDialog() {
            if (dialogIndex >= mockDialog.length) {
                // 对话结束，显示分析结果
                setTimeout(showAnalysisResults, 1000);
                return;
            }
            
            const entry = mockDialog[dialogIndex];
            addTranscriptEntry(entry.speaker, entry.text, entry.time);
            dialogIndex++;
            
            // 设置下一个对话的定时器
            dialogTimer = setTimeout(playNextDialog, 2000);
        }

        // 添加转录条目
        function addTranscriptEntry(speaker, text, time) {
            // 移除初始提示
            if (transcriptContainer.querySelector('.text-center')) {
                transcriptContainer.innerHTML = '';
            }
            
            const entry = document.createElement('div');
            entry.className = `transcript-entry ${speaker} mb-3 p-3 rounded`;
            entry.innerHTML = `
                <div class="flex items-center mb-1">
                    <span class="font-semibold ${speaker === 'doctor' ? 'text-blue-600' : 'text-green-600'}">
                        ${speaker === 'doctor' ? '医生' : '患者'}
                    </span>
                    <span class="text-xs text-gray-500 ml-2">${time}</span>
                </div>
                <p>${text}</p>
            `;
            transcriptContainer.appendChild(entry);
            
            // 滚动到底部
            transcriptContainer.scrollTop = transcriptContainer.scrollHeight;
        }

        // 显示分析结果
        function showAnalysisResults() {
            // 更新准确率
            accuracyRate.textContent = '96.8%';
            
            // 显示关键信息
            keyInfo.innerHTML = `
                <div class="flex justify-between items-start">
                    <span class="font-medium text-gray-700">主要症状</span>
                    <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">头痛(3天)</span>
                </div>
                <div class="flex justify-between items-start">
                    <span class="font-medium text-gray-700">疼痛性质</span>
                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded">胀痛</span>
                </div>
                <div class="flex justify-between items-start">
                    <span class="font-medium text-gray-700">严重程度</span>
                    <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">逐渐加重</span>
                </div>
                <div class="flex justify-between items-start">
                    <span class="font-medium text-gray-700">伴随症状</span>
                    <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">恶心</span>
                </div>
            `;
            
            // 显示诊断建议
            diagnosisSuggestions.innerHTML = `
                <div class="border-l-4 border-blue-500 pl-4 py-2 mb-3">
                    <h3 class="font-semibold text-gray-800">初步诊断</h3>
                    <p class="text-gray-600">偏头痛可能性较大 (置信度: 85%)</p>
                </div>
                <div class="border-l-4 border-green-500 pl-4 py-2 mb-3">
                    <h3 class="font-semibold text-gray-800">建议检查</h3>
                    <p class="text-gray-600">头颅CT，血常规</p>
                </div>
                <div class="border-l-4 border-yellow-500 pl-4 py-2">
                    <h3 class="font-semibold text-gray-800">处理建议</h3>
                    <p class="text-gray-600">可尝试布洛芬缓解疼痛，注意休息，避免强光刺激</p>
                </div>
            `;
            
            // 启用生成记录按钮
            generateRecordBtn.disabled = false;
        }

        // 生成问诊记录
        function generateMedicalRecord() {
            recordSection.classList.remove('hidden');
            
            recordContent.innerHTML = `
                <div class="grid grid-cols-3 gap-4 mb-4">
                    <div>
                        <p class="text-sm text-gray-500">姓名</p>
                        <p>张三</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">性别</p>
                        <p>男</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">年龄</p>
                        <p>35岁</p>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">主诉</h3>
                    <p>头痛三天，逐渐加重</p>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">现病史</h3>
                    <p>患者三天前无明显诱因出现头痛，主要为胀痛，感觉头要炸了一样，症状逐渐加重，伴有恶心但无呕吐，每日均有发作。</p>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">体格检查</h3>
                    <p>血压120/80mmHg，神经系统检查无异常</p>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">初步诊断</h3>
                    <p>偏头痛可能性较大</p>
                </div>
                
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">处理意见</h3>
                    <p>1. 可尝试布洛芬缓解疼痛<br>
                       2. 注意休息，避免强光刺激<br>
                       3. 建议完善头颅CT检查<br>
                       4. 如症状持续加重请及时复诊</p>
                </div>
            `;
            
            // 滚动到记录部分
            recordSection.scrollIntoView({ behavior: 'smooth' });
        }

        // 重置应用
        function resetApp() {
            // 停止录音和模拟
            stopRecording();
            if (dialogTimer) {
                clearTimeout(dialogTimer);
                dialogTimer = null;
            }
            
            // 重置状态
            dialogIndex = 0;
            accuracyRate.textContent = '-';
            
            // 清空内容
            transcriptContainer.innerHTML = `
                <div class="text-center text-gray-500 py-10">
                    <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                    <p>点击"开始录音"或"模拟对话"开始演示</p>
                </div>
            `;
            
            keyInfo.innerHTML = `
                <div class="text-center text-gray-500 py-4">
                    <i class="fas fa-info-circle text-2xl mb-2"></i>
                    <p>等待对话分析结果</p>
                </div>
            `;
            
            diagnosisSuggestions.innerHTML = `
                <div class="text-center text-gray-500 py-4">
                    <i class="fas fa-stethoscope text-2xl mb-2"></i>
                    <p>等待诊断建议生成</p>
                </div>
            `;
            
            generateRecordBtn.disabled = true;
            recordSection.classList.add('hidden');
        }
    </script>
</body>
</html>
